<template>
  <div style="padding: 30px">
    <a-table
      :data-source="page.data"
      bordered
      :loading="loading"
      :pagination="{
        pageSize: page.pageSize,
        current: page.pageNo,
        total: page.totals,
      }"
      @change="changeData"
    >
      <!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        {{ record.description }}
      </p> -->
      <a-table-column
        key="blockNumber"
        data-index="blockNumber"
        title="区块高度"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <!-- <a @click="toBlock(record.blockNumber)">{{ record.blockNumber }}</a> -->
            <router-link
              :to="{ name: 'Block', query: { number: record.blockNumber } }"
              >{{ record.blockNumber }}</router-link
            >
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="blockHash"
        data-index="blockHash"
        title="区块HASH"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <router-link
              :to="{ name: 'Block', query: { hash: record.blockHash } }">
              {{ record.blockHash }}

            </router-link>
            <a-icon type="copy" @click="copy(record.blockHash)"/>
            <!-- <a @click="toBlock(record.blockHash)"></a> -->
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="timestamp"
        data-index="timestamp"
        title="交易时间"
        width="150"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.timestamp }}
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="hash"
        data-index="hash"
        title="交易HASH"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <router-link
              :to="{ name: 'Transaction', query: { hash: record.hash } }">
              {{ record.hash }}
            </router-link>
            <a-icon type="copy" @click="copy(record.hash)"/>
            <!-- <a @click="toTransaction(record.hash)">{{ record.hash }}</a> -->
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="from"
        data-index="from"
        title="发送方"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <router-link
              :to="{ name: 'Balance', query: { address: record.from } }">
              {{ record.from }}
            </router-link>
            <a-icon type="copy" @click="copy(record.from)"/>
            <!-- <a @click="toAccount(record.from)">{{ record.from }}</a> -->
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="to"
        data-index="to"
        title="接收方"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <router-link
              :to="{ name: 'Balance', query: { address: record.to } }">
              {{ record.to }}
            </router-link>
            <a-icon type="copy" @click="copy(record.to)" v-if="record.to"/>
            <!-- <a @click="toAccount(record.to)">{{ record.to }}</a> -->
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="value"
        data-index="value"
        title="交易数量"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.value }} wei
          </span>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script>
import Constant from "../utils/Constant";

export default {
  data() {
    return {
      loading: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        totals: 0,
        data: [],
      },
    };
  },
  created() {
    this.getTransactions(1);
    this.$eventbus.$emit("selectMenu", { name: "Transactions"});
  },
  methods: {
    getTransactions(pageNo) {
      let url = Constant.TX_TRANSACTIONS_URL + pageNo;
      url += "?pageSize=" + this.page.pageSize;
      this.loading = true;
      this.$http.get(url).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code == "01") {
            this.page.data = resp.data.result.content;
            this.page.pageNo = resp.data.result.pageable.pageNumber + 1;
            this.page.pageSize = resp.data.result.pageable.pageSize;
            this.page.pages = resp.data.result.totalPages;
            this.page.totals = resp.data.result.totalElements;
          } else {
            this.$message.error(resp.data.message)
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    changeData(data) {
      console.log(data);
      this.getTransactions(data.current);
    },
    toTransaction(txHash) {
      console.log(txHash);
      this.$router.push({
        name: "Transaction",
        params: {
          hash: txHash,
        },
      });
    },
    toBlock(txHash) {
      console.log(txHash);
      this.$router.push({
        name: "Block",
        params: {
          hash: txHash,
        },
      });
    },
    toAccount(address) {
      console.log(address);
      this.$router.push({
        name: "Account",
        params: {
          address: address,
        },
      });
    },
    copy(data) {
      console.log("copy", data)
      Constant.copyToClipboard(data, () => {
         this.$message.success(data + " Copied!")
      });
    },
  },
};
</script>
